Macromedia - Dreamweaver TechNotes: How to incorporate Server-Side Includes into an HTML page

Home > Products > Dreamweaver > Support > TechNote Index

How to incorporate Server-Side Includes into an HTML page

Overview of SSI
Server-Side Includes (SSI) are a feature of CGI (working in conjunction with a server) that allow you to dynamically insert a piece of information into any Web page. For example, the current date or an HTML file can be inserted and the browser will display it as though it was hard coded onto the page. It is possible to display the current date and time on the top of your Web page simply by adding one line of SSI code into the body section of the page like this:

( )

Once the page is uploaded to the remote server, a browser that loads this page will see the current system date displayed on the page. This has obvious advantages over manually editing every HTML page, changing the date to the current one each and every day. This functionality also extends to reoccurring data that will appear in many pages throughout your site. Creating and inserting a server-side include into multiple pages provides an easy way to add standardized header or footer information, rather than recreating the same information again and again.

The diagram below outlines how the information is passed from the server to the browser:

The server processes the SSI and outputs as HTML

Implementing SSI on your Web site
There are two very important factors to consider when working with Server-Side Includes. First, any HTML file that has SSI inserted within it must have the file extension .shtm or .shtml in order for the server to know to parse the page for an SSI, respond to the SSI commands and return the appropriate information. The file name may be saved with an .shtm or .shtml extension at the time of its creation, or changed afterwards.

The second factor to consider is if your host-server supports Server-Side Includes. You must verify that the server supports .shtm and .shtml files for your account. Contact your Internet Service Provider to determine this, or follow the steps below to test whether your server supports these files.

To find out if your server supports SSI, do the following:

1 Create a new HTML page, and type the following in between the opening <body> and the closing </body> tags of the page:


2 Save and name the page "test.shtm".

3 Upload the page to the remote server and view it using your browser.

4 If you see the current date displayed, your Web host supports SSI. If you do not see the date, your Web host does not support SSI.

Note: This SSI test is not always completely accurate. Contact your site administrator for more information regarding the server.

Some common functionalities of SSI:

1 Include snippets of HTML inside another HTML page.

2 Display the current date and time (In the format you choose).

3 Display the last modified date of an HTML page.

4 Execute a CGI script or command directly from the Web page.

Include snippets of HTML inside another HTML page
This is one of the most useful, commonly utilized features of SSI. Please note that this is the only one of these examples tech support can assist you with. The ability to include one document inside another provides an easy way to integrate reoccurring information, such as header or footer information. By pointing many pages to one document, you simplify the updating process as well. Similar to library items, only one file needs to be changed in order to update the information. (To learn more about library items, see Modifying a Library Item.)

How to create a simple footer SSI using Dreamweaver

1 Create a new file in Dreamweaver.

2 Type in the information that you wish to appear on the bottom of your web pages. This might include your company address, or links to other sections of your site. For example:
Home | Contact Us | Gallery | Orders

After typing the desired text, use the Property inspector to add links.

3 Select Window > HTML to open the HTML inspector. The source code for the example above looks like this:<html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF"> <p align="center"> <font face="Geneva, Arial, Helvetica, sans-serif" size="2"><a href="home.htm">Home</a> | <a href="mailto:myemail@address.com">Contact Us</a> | <a href="gallery.htm">Gallery</a> | <a href="orders.htm">Orders</a></font></p> </body>
</html>

4 Highlight all the text displayed in black and delete it. The HTML inspector should contain only the information in red. It is especially important NOT to have <html>, <head> or <body> tags in the SSI, because this will cause the HTML on the page to become invalid once the SSI is inserted.

5 Choose File > Save to save the file. Name the file "footer.ssi" and save it inside the local root folder of your site.

6 Next, create a new HTML file and save the page inside the local root folder. Click the cursor on the page where you wish to insert the footer.

7 Select Insert > Server-Side Include. In the Select File dialog box, navigate to the footer.ssi file.

8 Save the HTML file with the .shtm or .shtml extension and close it. Using the Site Window, upload (put) the file to the remote server. Using your browser, go to the URL to view the page remotely from the server. Steps 6 - 8 can be repeated as often as desired, to add the footer information to multiple pages within a site.

Display the current date and time
This is handy for displaying the date on a Web page.

How to create a simple footer SSI using Dreamweaver

1 To display the current date and time, add the following SSI code in between the opening <body> and the closing </body> tags of the HTML page:

Once the page is uploaded and viewed remotely, the result is this:
Tuesday, 22-Mar-2000 20:04:02 PST

2 If desired, you can modify the way the date is displayed. For example:

This source code: 

  results in this display: 05/24/99

This source code: 

  results in this display: 23:59:01

This source code: Today is 

  results in this display: Today is Friday

Display the last modified date of an HTML page
Reassure the visitors of your site that the information is updated on a regular basis by letting them know what date the page was last revised.

To display the date a page was last modified, add the following SSI code:

1 To display the modification date, add the following SSI code in between the <body> tags in your HTML page:

Where page.shtm is the name of the file.

2 Once the page is uploaded and viewed remotely, the result will look similar to:
Monday, 07-Mar-1999 05:22:34 PST

Execute a CGI script or command directly from an HTML page
This is a very powerful feature that is best left to advanced designers. In this situation, the SSI inserted into a Web page references a CGI script that also lives on the server. Some CGI scripts must be initiated from the HTML page, and an SSI is the way to accomplish this.

To call a CGI script from within an HTML page, add the following SSI code:

1 To reference an existing CGI script from the server, add the following SSI code in between the opening <body> and the closing </body> tags of the HTML page:

Where thescript.cgi is the name of the CGI script being referenced.

2 Make sure the page is saved with an .shtm or .shtml extension, then upload the page to the remote server. Test the page by navigating to it from a browser remotely, to ensure that the script works as expected.

ID:	14380
Product:	Dreamweaver
Versions:	All
OS:	All
Browser:	All
Server:	None
Database:	None
Former ID:	N/A

How useful was this document?

less		more
1	2	3	4	5

How can the document be improved? (300 characters or less - you will not receive a reply.)

Last updated:	February 25, 2002
Created:	June 3, 2003




			Company \| Site Map \| Privacy \| Contact Us \| Accessibility \| Report Piracy

			©1995-2003 Macromedia, Inc. All rights reserved. Use of this website signifies your agreement to the Terms of Use.